<template>
	<div style="display: flex;justify-content: space-between;">
		<div style="width: 459px;">
			<div>
				<div style="background: linear-gradient(270deg, #041C62, #1649A4);line-height: 32px;"
					class="font18 colorfff">
					<div :style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon16.png')+')'}"
						style="background-size: 140px 32px;background-repeat: no-repeat;padding-left: 20px;">
						产生情况
					</div>
				</div>

				<div style="background: #041C62;position: relative;">
					<div class="displayFlexBet">
						<div style="padding: 58px 30px;flex: 1;">
							<div style="color: #75E7FF;">
								<span class="font24">{{data1.produceQty}}</span>
								<span class="font16">吨</span>
							</div>
							<div class="colorfff">年危废产生总量</div>
						</div>
						<div style="padding: 58px 30px;flex: 1;">
							<div style="color: #75E7FF;">
								<span class="font24">{{data1.sourceNum}}</span>
								<span class="font16">个</span>
							</div>
							<div class="colorfff">产生源/生产设施</div>
						</div>
					</div>
					<div class="displayFlexBet">
						<div style="padding: 58px 30px;flex: 1;">
							<div style="color: #75E7FF;">
								<span class="font24">{{data1.planProduceQty}}</span>
								<span class="font16">吨</span>
							</div>
							<div class="colorfff">年度计划量</div>
						</div>
						<div style="padding: 58px 30px;flex: 1;">
							<div style="color: #75E7FF;">
								<span class="font24">{{data1.wasteNum}}</span>
								<span class="font16">个</span>
							</div>
							<div class="colorfff">危废种类</div>
						</div>
					</div>

					<div
						style="width: 100%;height: 1px;background: linear-gradient(90deg, rgba(52,107,205,0), #2D75F6, rgba(45,117,246,0));position: absolute;left: 0;top: 50%;">
					</div>

					<div
						style="width: 1px;height: 100%;background: linear-gradient(0deg, rgba(52,107,205,0), #2D75F6, rgba(45,117,246,0));position: absolute;left: 50%;top: 0%;">
					</div>
				</div>
			</div>

			<div class="mt13">
				<div style="background: linear-gradient(270deg, #041C62, #1649A4);line-height: 32px;"
					class="font18 colorfff">
					<div :style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon16.png')+')'}"
						style="background-size: 140px 32px;background-repeat: no-repeat;padding-left: 20px;">
						产生进度
					</div>
				</div>

				<div style="background: #041C62;position: relative;text-align: center;">
					<img src="../../assets/bigScreen/icon17.png" style="width: 303px;height: 236px;margin: 0 auto;" />

					<div style="position: absolute;top: 17%;left: 34%;background: #040F48;border-radius: 50%;">
						<el-progress type="circle" :percentage="data2" :stroke-width="10" :width="150"
							text-color="#75E7FF"></el-progress>
					</div>
				</div>
			</div>

			<div class="mt13">
				<div style="background: linear-gradient(270deg, #041C62, #1649A4);line-height: 32px;"
					class="font18 colorfff">
					<div :style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon16.png')+')'}"
						style="background-size: 140px 32px;background-repeat: no-repeat;padding-left: 20px;">
						产生类别
					</div>
				</div>

				<div style="background: #041C62;position: relative;text-align: center;">
					<div id="chart1" style="width: 100%;height: 280px;"></div>
				</div>
			</div>
		</div>
		<div style="width: calc(100% - 920px);" class="ml12 mr12">
			<div class="displayFlexBet">
				<div style="width: 302px;background: #041C62;" v-for="(item,index) of data4">
					<div class="textCenter"
						:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon18.png')+')'}"
						style="background-size: 100% 42px;background-repeat: no-repeat;">
						<div class="colorfff font18">{{item.year}}</div>
					</div>

					<div class="textCenter" style="margin-top: 26px;">
						<div class="font16 colorfff mb5">产生</div>
						<dv-digital-flop :config="{number: [item.produceQty],content: '{nt}',style:{
							fill: '#75E7FF',
							 fontSize: 24,
						}}" style="width:100%;height:50px;" textAlign="center" />

						<!-- <div style="color: #75E7FF;" class="font24"></div> -->
					</div>

					<div class="textCenter" style="margin-top: 26px;">
						<div class="font16 colorfff mb5">总处置</div>

						<dv-digital-flop :config="{number: [item.disposeQty],content: '{nt}',style:{
							fill: '#75E7FF',
							 fontSize: 24,
						}}" style="width:100%;height:50px;" textAlign="center" />
					</div>

					<div class="textCenter" style="margin-top: 26px;">
						<div class="font16 colorfff mb5">综合利用</div>

						<dv-digital-flop :config="{number: [item.useQty],content: '{nt}',style:{
							fill: '#75E7FF',
							 fontSize: 24,
						}}" style="width:100%;height:30px;" textAlign="center" />
					</div>

					<div class="textCenter" style="margin-top: 26px;">
						<div class="font16 colorfff mb5">产生强度</div>
						<dv-digital-flop :config="{number: [item.producePercent],toFixed: 1,content: '{nt}%',style:{
							fill: '#75E7FF',
							 fontSize: 24,
						}}" style="width:100%;height:50px;" textAlign="center" />

					</div>

					<div class="textCenter" style="margin-top: 26px;">
						<div class="font16 colorfff mb5">综合利用率</div>
						<dv-digital-flop :config="{number: [item.usePercent],toFixed: 1,content: '{nt}%',style:{
							fill: '#75E7FF',
							 fontSize: 24,
						}}" style="width:100%;height:50px;" textAlign="center" />
					</div>

					<div style="padding: 10px;margin-top: 25px;">
						<dv-water-level-pond :config="{data: [item.usePercent],shape: 'roundRect'}"
							style="width:282px;height:90px" />
					</div>
				</div>
			</div>


			<div class="mt12">
				<div style="background: linear-gradient(270deg, #041C62, #1649A4);line-height: 32px;"
					class="font18 colorfff">
					<div :style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon16.png')+')'}"
						style="background-size: 140px 32px;background-repeat: no-repeat;padding-left: 20px;">
						贮存情况
					</div>
				</div>

				<div style="background: #041C62;position: relative;display: flex;">
					<div style="padding: 5px 0 40px 30px;">
						<div :style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon19.png')+')'}"
							style="background-size: 100% 100%;background-repeat: no-repeat;width: 102px;line-height: 35px;"
							class="textCenter font14 colorfff">整体情况</div>
						<div class="displayFlex" style="margin-top: 50px;">
							<div style="width: 6px;height: 48px;background: #1649A4;"></div>
							<div class="ml20">
								<div style="color: #75E7FF;">
									<span class="font24">{{data5.totalQty}}</span>
									<span class="font14">吨</span>
								</div>
								<div class="colorfff mt5">贮存总量</div>
							</div>
						</div>
						<div class="displayFlex" style="margin-top: 30px;">
							<div style="width: 6px;height: 48px;background: #1649A4;"></div>
							<div class="ml20">
								<div style="color: #75E7FF;">
									<span class="font24">{{data5.storageNum}}</span>
									<span class="font14">个</span>
								</div>
								<div class="colorfff mt5">贮存设施</div>
							</div>
						</div>
					</div>

					<div style="padding:5px 0 10px 150px;">
						<div :style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon19.png')+')'}"
							style="background-size: 100% 100%;background-repeat: no-repeat;width: 102px;line-height: 35px;"
							class="textCenter font14 colorfff">危废分布</div>

						<div style="width: 616px;height: 32px;background: #1649A4;"
							class="displayFlexBet colorfff font14 mt20">
							<div style="width: 40px;"></div>
							<div style="width: 200px;">危废名称</div>
							<div style="width: 100px;">贮存量（吨）</div>
							<div style="width: 200px;">占比</div>
						</div>

						<div class="mt20" style="height: 150px;overflow-y: auto;">
							<div class="displayFlexBet colorfff font14 mb20" v-for="(item,index) in data5.list">
								<div style="width: 40px;">{{index+1}}</div>
								<div style="width: 200px;">{{item.wasteName}}</div>
								<div style="width: 100px;">{{item.amount}}</div>
								<div style="width: 200px;">{{item.percent}}</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>


		<div style="width: 459px;">
			<div>
				<div style="background: linear-gradient(270deg, #041C62, #1649A4);line-height: 32px;"
					class="font18 colorfff">
					<div :style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon16.png')+')'}"
						style="background-size: 140px 32px;background-repeat: no-repeat;padding-left: 20px;">
						委外利用
					</div>
				</div>

				<div style="background: #041C62;position: relative;padding: 50px 0;" class="displayFlexBet colorfff">
					<div style="flex: 1;margin-top: 40px;" class="textCenter">
						<div style="background-size: 100% 100%;width: 112px;height: 66px;margin: 0 auto;position: relative;"
							:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon7.png')+')'}">
							<div style="color:#fff;font-weight: bold;position: absolute;top: -20px;left: 0;right: 0;"
								class="textCenter">
								<span class="font24">{{ data6.outDispose.actualDisposeQty }}</span>
								<span class="font16">吨</span>
							</div>
						</div>
						<div style="font-size:17px">委外总量</div>
					</div>

					<div style="flex: 1;margin-top: 40px;" class="textCenter">
						<div style="background-size: 100% 100%;width: 112px;height: 66px;margin: 0 auto;position: relative;"
							:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon7.png')+')'}">
							<div style="color:#fff;font-weight: bold;position: absolute;top: -20px;left: 0;right: 0;"
								class="textCenter">
								<span class="font24">{{ data6.outDispose.planDisposeQty }}</span>
								<span class="font16">吨</span>
							</div>
						</div>
						<div style="font-size:17px">计划总量</div>
					</div>
				</div>
			</div>

			<div class="mt12">
				<div style="background: linear-gradient(270deg, #041C62, #1649A4);line-height: 32px;"
					class="font18 colorfff">
					<div :style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon16.png')+')'}"
						style="background-size: 140px 32px;background-repeat: no-repeat;padding-left: 20px;">
						自行利用
					</div>
				</div>

				<div style="background: #041C62;position: relative;padding: 50px 0;" class="displayFlexBet colorfff">
					<div style="flex: 1;margin-top: 40px;" class="textCenter">
						<div style="background-size: 100% 100%;width: 112px;height: 66px;margin: 0 auto;position: relative;"
							:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon7.png')+')'}">
							<div style="color:#fff;font-weight: bold;position: absolute;top: -20px;left: 0;right: 0;"
								class="textCenter">
								<span class="font24">{{ data6.selfDispose.actualDisposeQty }}</span>
								<span class="font16">吨</span>
							</div>
						</div>
						<div style="font-size:17px">利用总量</div>
					</div>

					<div style="flex: 1;margin-top: 40px;" class="textCenter">
						<div style="background-size: 100% 100%;width: 112px;height: 66px;margin: 0 auto;position: relative;"
							:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon7.png')+')'}">
							<div style="color:#fff;font-weight: bold;position: absolute;top: -20px;left: 0;right: 0;"
								class="textCenter">
								<span class="font24">{{ data6.selfDispose.planDisposeQty }}</span>
								<span class="font16">吨</span>
							</div>
						</div>
						<div style="font-size:17px">计划量</div>
					</div>
				</div>
			</div>

			<div class="mt12">
				<div style="background: linear-gradient(270deg, #041C62, #1649A4);line-height: 32px;"
					class="font18 colorfff">
					<div :style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon16.png')+')'}"
						style="background-size: 140px 32px;background-repeat: no-repeat;padding-left: 20px;">
						规范化评估
					</div>
				</div>

				<div style="background: #041C62;height: 400px;">
					<div id="main2" style="width: 100%;height: 300px;"></div>

					<div
						style="font-size: 16px;width:100%;display: flex;flex-wrap: wrap;justify-content: center;padding: 0 30px;margin-top: -30px;">
						<div v-for="(item, index) in data7" :key="index"
							style="color:#fff;margin-bottom: 6px;text-align: left;width: 33.3%;">
							<div>{{ item.title.split('（')[0] }}</div>
							<div style="color: #75E7FF;">{{ item.score }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from 'moment'
	let that

	export default {
		name: "wufie",
		data() {
			return {
				data1: {},
				data2: 0,
				data3: [],
				data4: {},
				data5: {
					list: []
				},
				data6: {
					outDispose: {},
					selfDispose: {}
				},
				data7: []
			}
		},

		mounted() {
			that = this

			setTimeout(function() {
				that.getGasRiskList()
			}, 1000)
			that.getHwProdStat()
			that.getHwProdPercent()
			that.countHwProdQtyByWaste()
			that.countHwYearInfos()

			that.countHwStorageInfos()
			that.countHwDisposeInfos()
		},

		methods: {
			countHwDisposeInfos() {
				that.ajax({
					url: 'hw/screen/countHwDisposeInfos',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						that.data6 = result.data
					},
				})
			},
			countHwStorageInfos() {
				that.ajax({
					url: 'hw/screen/countHwStorageInfos',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						that.data5 = result.data
					},
				})
			},

			countHwYearInfos() {
				that.ajax({
					url: 'hw/screen/countHwYearInfos',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						that.data4 = [result.data.beforeLastYear, result.data.lastYear, result.data.currentYear]
					},
				})
			},

			countHwProdQtyByWaste() {
				that.ajax({
					url: 'hw/screen/countHwProdQtyByWaste',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						that.data3 = result.data
						that.formPieChart('chart1')
					},
				})
			},

			getHwProdPercent() {
				that.ajax({
					url: 'hw/screen/getHwProdPercent',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						that.data2 = result.data
					},
				})
			},

			getHwProdStat() {
				that.ajax({
					url: 'hw/screen/getHwProdStat',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						that.data1 = result.data
					},
				})
			},

			getGasRiskList() {
				that.ajax({
					url: 'oneMap/getAiInspect',
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {

						let dataList = result.data
						let newDataList = []
						for (let key in dataList) {
							let thisItem = {
								title: '',
								score: 0
							}
							if (key == 'disorganizedScore') {
								thisItem.title = '无组织排放'
								thisItem.score = dataList[key]
							}
							if (key == 'docScore') {
								thisItem.title = '环保制度'
								thisItem.score = dataList[key]
							}
							if (key == 'stdBookScore') {
								thisItem.title = '环境台账'
								thisItem.score = dataList[key]
							}
							if (key == 'cleanTranScore') {
								thisItem.title = '清洁运输'
								thisItem.score = dataList[key]
							}
							if (key == 'machineScore') {
								thisItem.title = '处置设备运行'
								thisItem.score = dataList[key]
							}
							if (key == 'organizedScore') {
								thisItem.title = '有组织排放'
								thisItem.score = dataList[key]
							}
							newDataList.push(thisItem)
						}
						that.data7 = newDataList
						console.log("AI巡检", that.data7)

						let chartDom = document.getElementById("main2");
						let myChart = echarts.init(chartDom);
						let option;
						let names = []
						let datas = []
						let legendData = []

						for (let item of newDataList) {
							//console.log(item)
							legendData.push(item.title)
							names.push({
								name: '',
								max: 5
							})
							datas.push(item.score)
						}
						//console.log(legendData)

						option = {
							legend: {
								data: legendData
							},
							radar: {
								indicator: names,
								center: ['45%', '50%'],
								radius: '50%', // 半径
								splitArea: {
									//分隔区域
									show: true, // 是否显示分隔区域, 默认true
									areaStyle: {
										// 分隔区域的样式 (淡蓝色)
										color: '#296197'
									}
								},

								splitLine: {
									//分隔线
									show: false, //默认数值轴显示，类目轴不显示
									lineStyle: {
										// 分隔线的样式 (淡蓝色)
										color: 'rgba(255, 0, 255, 0.2)'
									}
								},
							},
							series: [{
								name: '',
								type: 'radar',

								data: [{
									value: datas,
									name: 'name',
									areaStyle: {
										color: "#fff"
									},
									label: {
										show: true,
										formatter: function(params) {
											return params.value;
										}
									}
								}]
							}]
						};

						option && myChart.setOption(option);
					}
				})
			},

			formPieChart(chartId) {
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;

				let dataList = []
				for (let item of that.data3) {
					let thisItem = {
						value: item.amount,
						name: item.wasteName
					}
					dataList.push(thisItem)
				}
				option = {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						right: '30',
						top: 'middle',
						icon: 'circle',
						formatter(name) {
							if (name) {
								/*let info = data.find((item) => item.name == name);
								return name + "                   " + info.value;*/
								let target
								for (let i = 0; i < dataList.length; i++) {
									if (dataList[i].name === name) {
										target = dataList[i].value
									}
								}
								var arr = [
									'{a|' + name + '}',
									'{c|' + target + '}'
								]
								return arr.join('  ')
							}
						},
						textStyle: { // 添加
							padding: [8, 0, 0, 0],
							rich: {
								a: {
									fontSize: 15,
									color: '#fff'
								},
								c: {
									fontSize: 15,
									color: '#75E7FF'
								}
							}
						}
					},
					series: [{
						name: '',
						type: 'pie',
						center: ['30%', '50%'],
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,

						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: dataList
					}]
				};

				option && myChart.setOption(option);
			}
		}
	}
</script>

<style scoped>

</style>